<template>
  <div class="header">
    <div class="title">个人中心</div>
    <img v-on:click="goshezhi()" :src="arr.shezhi.src" alt="" class="shezhi" />
    <img @click="login()" :src="arr.lis.src" alt="" class="lis" /><!--暂时设置登录入口-->
    <img @click="goOne" :src="arr.mes.src" alt="" class="mes" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: {
        shezhi: { src: require("@/assets/wode_03.jpg") },
        lis: { src: require("@/assets/wode_05.jpg") },
        mes: { src: require("@/assets/wode_08.jpg") },
      },
    };
  },
  methods:{
    goshezhi(){
      this.$router.push('/shezhi')
    },
    login(){
      this.$router.push('/login')//? 暂时设置登录入口
    },
    goOne(){
      this.$router.push('/xiaoming')//? “一”的入口
    }
  }
};
</script>

<style scoped>
.header {
  height: 60rem;
  line-height: 60rem;
  text-align: center;
  position: relative;
  background: linear-gradient(to right, rgb(255,130,114), rgb(255, 94, 98));
}
.title {
  font-size: 16rem;
  font-weight: bold;
  color: #fff;
}
.shezhi {
  position: absolute;
  left: 17rem;
  width: 23rem;
  height: 18rem;
  top: 18rem;
  margin-top: 3rem;
}
.lis {
  position: absolute;
  right: 52rem;
  width: 21rem;
  height: 18rem;
  top: 20rem;
}
.mes {
  position: absolute;
  right: 17rem;
  width: 19rem;
  height: 16rem;
  top: 15rem;
  margin-top: 6rem;
}
</style>
